import { Component, Input, Output, EventEmitter } from '@angular/core';
import { MenuItem } from '../../main/main.component';

@Component({
  selector: 'app-recursive-menu',
  template: `
    <ul class="recursive-menu">
      <li *ngFor="let item of menuItems" 
          [class.has-children]="item.children?.length"
          [class.active]="currentId === item.id"
          [class.expanded]="item.expanded">
        <div class="menu-item" 
             [class.leaf-node]="!item.children?.length"
             (click)="handleItemClick(item)" 
             [title]="isCollapsed ? item.name : ''">
          <span class="icon">
            <i nz-icon [nzType]="item.icon" nzTheme="outline"></i>
          </span>
          <span class="name" [class.hidden]="isCollapsed">{{item.name}}</span>
          <span *ngIf="item.children?.length" class="arrow" [class.hidden]="isCollapsed">
            <i nz-icon 
               nzType="down" 
               nzTheme="outline"
               [class.expanded]="item.expanded">
            </i>
          </span>
        </div>
        <div class="submenu-wrapper" 
             [class.expanded]="item.expanded"
             *ngIf="item.children?.length">
          <app-recursive-menu
            *ngIf="!isCollapsed"
            [menuItems]="item.children"
            [currentId]="currentId"
            [isCollapsed]="isCollapsed"
            (itemClick)="itemClick.emit($event)"
            (expandChange)="expandChange.emit($event)">
          </app-recursive-menu>
        </div>
      </li>
    </ul>
  `,
  styles: [`
    .recursive-menu {
      list-style: none;
      padding: 0;
      margin: 0;
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.2);
        border-radius: 3px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
    }
    .menu-item {
      display: flex;
      align-items: center;
      padding: 10px 20px;
      color: white;
      cursor: pointer;
      
      &:not(.has-children) {
        justify-content: center;
        
        .name {
          flex: 0 0 auto;
        }
        
        .icon {
          margin-right: 8px;
        }
      }

      &.has-children {
        justify-content: space-between;
      }
    }
    .menu-item:hover {
      background: rgba(255,255,255,0.1);
    }
    .active > .menu-item {
      background: #1890ff;
    }
    .has-children > .menu-item {
      font-weight: bold;
    }
    .arrow {
      font-size: 12px;
      padding: 4px;
      color: rgba(255, 255, 255, 0.65);

      i {
        display: inline-block;
        transition: transform 0.3s ease;
        transform: rotate(0deg);

        &.expanded {
          transform: rotate(180deg);
        }
      }
    }
    li li .menu-item {
      padding-left: 40px;
    }
    li li li .menu-item {
      padding-left: 60px;
    }
    .recursive-menu li ul {
      overflow: hidden;
      transition: max-height 0.3s ease-in-out;
    }
    .submenu-wrapper {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.3s ease-out;

      &.expanded {
        max-height: 1000px; // 根据实际内容调整
        transition: max-height 0.3s ease-in;
      }
    }
    ::ng-deep .recursive-menu {
      transform: translateZ(0);
    }
  `]
})
export class RecursiveMenuComponent {
  @Input() menuItems: MenuItem[] = [];
  @Input() currentId: string | null = null;
  @Input() isCollapsed = false;
  @Output() itemClick = new EventEmitter<MenuItem>();
  @Output() expandChange = new EventEmitter<{id: string; expanded: boolean}>();

  handleItemClick(item: MenuItem) {
    if (item.children?.length) {
      this.expandChange.emit({ id: item.id, expanded: !item.expanded });
    } else {
      this.itemClick.emit(item);
    }
  }
} 